<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>app</h1>
        <p>msg:{{msg}}</p>
        <book name="三国演义" price="12" @change="changeFn" ></book>

    </div>
</body>
</html>
<script src="./js/vue.global.js"></script>
<script>

    let Book = {
        props:["name","price"],
        emits:{
            "change":(str)=>{
                if(str && typeof str === "string"){                    
                    return true
                }else{
                    // throw new 主动抛出异常，这个异常，是可以被 try catch 捕获的。
                    throw new TypeError("亲，没有传入参数，或者参数类型不对");
                    return false;
                }
            }
        },
        template:`
            <h1>书籍信息</h1>
            <div>
                <p>书名：{{name}}</p>
                <p >价格：{{price}}</p>      
                <input type="button" value="修改" @click="clickHandle" >
            </div>
            <hr/>
        `,
        data(){
            return {
                author:"罗贯中"
            }
        },
        methods:{
            clickHandle(){
                this.$emit("change","12");
            }
        }
    }

     let app = Vue.createApp({
        data(){
            return {
                msg:"hello" 
            }
        },
        methods:{
            changeFn(str){
                console.log("父组件中获得的子组件的值：",str);
            }
        }
    });

    // book组件是在app上全局注册的。
    app.component("book",Book);
    

    app.mount("#app");
    



</script>